<template>
  <div class="person">
    <h2>汽车信息</h2>
    <h2>一辆{{ car.brand }}车价值:{{ car.price }}w</h2>
    <button @click="changePrice">修改汽车的价格</button>
    <br />
    <h2>游戏列表</h2>
    <ul>
      <li v-for="game of games" :key="game.id">{{ game.name }}</li>
    </ul>
    <button @click="changeFirstGame">修改第一个游戏的名字</button>
    <hr />
    <h2>测试 {{ obj.a.b.c }}</h2>
    <button @click="changeObj">测试</button>
  </div>
</template>

<script setup lang="ts" name="Person">
// 引入 reactive 实现对象类型的响应式数据
import { reactive } from "vue";

// 数据  使用reactive()包裹响应式对象类型的数据
let car = reactive({ brand: "奔驰", price: 100 });
let games = reactive([
  { id: "dshj01", name: "原神" },
  { id: "dshj01", name: "和平精英" },
  { id: "dshj01", name: "王者荣耀" },
]);
// 深层次监视响应
let obj = reactive({
  a: {
    b: {
      c: 666,
    },
  },
});
console.log(car); // Proxy
console.log(games);// Proxy

// 方法
function changePrice() {
  car.price += 10;
}
function changeFirstGame() {
  games[0].name = "绝地求生";
}
function changeObj() {
  obj.a.b.c = 888;
}
</script>

<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
button {
  margin: 0 5px;
}
li {
  font-size: 20px;
}
</style>
